{include file='/public/index-header'}
<body>
    {include file='/public/index-nav'}
    <div class="layui-container ws-container">
        <div class="layui-row" style="margin-top: 40px;">
            <div class="layui-col-md3">
                <div class="layui-tab layui-tab-brief">
                    <ul class="layui-tab-title">
                      <li class="layui-this" lay-id="study_1">课程资源目录</li>
                    </ul>
                    <div class="layui-tab-content">
                      <div class="layui-tab-item layui-show">
                        {if !empty($menu) }
                            <div>
                                <ul class="layui-menu">
                                    {foreach $menu as $key => $value}
                                    <li class="layui-menu-item-group layui-menu-item-down">
                                        <div class="layui-menu-body-title">
                                            {$value.title|default=''}<i class="layui-icon layui-icon-up"></i>
                                        </div>
                                        {if !empty($value['sub']) }
                                        <ul>
                                            {foreach $value['sub'] as $k => $sub_v}
                                            <li class="{if $sub_v['id'] == $cp_id} layui-menu-item-checked {/if}">
                                                <div style="display: flex;"  lay-on="s_tiao">
                                                        {if $sub_v['type'] == 3 } 
                                                        <span class="span_l" style="border: 1px solid rgb(255, 157, 24); color: rgb(255, 157, 24);">实训</span>
                                                        <input type="hidden" name="meco" value="{$sub_v['employ_id']|default=''}" mvid="{$sub_v['id']|default=''}">
                                                        <input type="hidden" name="mctt" value="{$sub_v['title']|default=''}">
                                                        <input type="hidden" name="mt" value="0">
                                                        {elseif $sub_v['type'] == 2} 
                                                        <span class="span_l" style="border: 1px solid rgb(155, 24, 255); color: rgb(155, 24, 255);">视频</span>
                                                        <input type="hidden" name="meco" value="" mvid="{$sub_v['id']|default=''}">
                                                        <input type="hidden" name="mctt" value="{$sub_v['title']|default=''}">
                                                        <input type="hidden" name="mt" value="2">
                                                        {elseif $sub_v['type'] == 1} 
                                                        <span class="span_l" style="border: 1px solid rgb(48, 97, 208); color: rgb(48, 97, 208);">资料</span>
                                                        <input type="hidden" name="meco" value="" mvid="{$sub_v['id']|default=''}">
                                                        <input type="hidden" name="mctt" value="{$sub_v['title']|default=''}">
                                                        <input type="hidden" name="mt" value="1">
                                                        {/if}
                                                    <div class="layui-menu-body-title" style="margin-left: 0px;">
                                                        {$sub_v.title|default=''}
                                                    </div>
                                                </div>
                                            </li>
                                            {/foreach}
                                        </ul>
                                        {/if}
                                    </li>
                                    {/foreach}
                                </ul>
                            </div>
                        {/if}
                      </div>
                    </div>
                  </div>
            </div>
            <div class="layui-col-md8">
                <div class="layui-tab layui-row">
                    <div class="layui-col-md10" style="margin: 20px 10px 10px 40px;">
                        <h2 style="text-align: center;margin: 10px 0px;">{$i_title|default=''}</h2>
                        <iframe src="" width="900px" height="600px" frameborder="0" scrolling="auto" id="d_iframe" mvid=""></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file='/public/index-foot'}
</body>
<input type="hidden" name="err_msg" value="{$err_msg|default=''}" />
<style type="text/css">
.span_l {
    background: #fff;
    border-radius: 2px;
    font-size: 12px;
    padding: 0 6px
}
</style>
<script type="text/javascript">
    $(function () {
        layui.use(['util'], function () {
            let util = layui.util;
            util.on({
                's_tiao' : function () {
                    let mtype = $(this).find('input[name=mt]').val();
                    let meco = $(this).find('input[name=meco]').val();
                    let mctt = $(this).find('input[name=mctt]').val();
                    let mvid = $(this).find('input[name=meco]').attr('mvid');
                    switch (parseInt(mtype)) {
                        case 0 :
                            endTimer(true);
                            util.openWin({
                                url:"{:sysuri('info.index/index')}"+"?employ_id="+meco+"&task_id="+"{$task_id}",
                            })
                        break;
                        case 1 :
                            $('#d_iframe').siblings('h2').html(mctt)
                            $('#d_iframe').attr('src', '{:sysuri("getinfo")}?cid='+mvid).attr('mvid', mvid)
                        break;
                        case 2 :
                            $('#d_iframe').siblings('h2').html(mctt)
                            $('#d_iframe').attr('src', '{:sysuri("getinfo")}?cid='+mvid).attr('mvid', mvid)
                        break;
                    }
                }
            })

            function load_msg() {
                let err_msg = $('input[name=err_msg]').val();
                if(err_msg.length > 0){
                    $.msg.error(err_msg)
                }
            }

            load_msg()

            // 初始化数据
            function load_data() {
                let mtype = $('.layui-menu-item-group .layui-menu-item-checked').find('input[name=mt]').val();
                let meco = $('.layui-menu-item-group .layui-menu-item-checked').find('input[name=meco]').val();
                let mctt = $('.layui-menu-item-group .layui-menu-item-checked').find('input[name=mctt]').val();
                let mvid = $('.layui-menu-item-group .layui-menu-item-checked').find('input[name=meco]').attr('mvid');
                switch (parseInt(mtype)) {
                    case 0 :
                        util.openWin({
                            url:"{:sysuri('info.index/index')}"+"?employ_id="+meco+"&task_id="+"{$task_id}",
                        })
                    break;
                    case 1 :
                        $('#d_iframe').siblings('h2').html(mctt)
                        $('#d_iframe').attr('src', '{:sysuri("getinfo")}?cid='+mvid).attr('mvid', mvid)
                    break;
                    case 2 :
                        $('#d_iframe').siblings('h2').html(mctt)
                        $('#d_iframe').attr('src', '{:sysuri("getinfo")}?cid='+mvid).attr('mvid', mvid)
                    break;
                }
            }

            load_data()
        })

        let startTime;
        let currentSrc;
        let currentMid;
        let isLast = false;

        // 初始化 MutationObserver
        function initMutationObserver() {
            const observer = new MutationObserver((mutationsList) => {
                for (const mutation of mutationsList) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
                        // 当 src 属性发生变化时，记录新的开始时间，新的 src，并启动定时器
                        startTimer();
                        currentSrc = $('#d_iframe').attr('src');
                        currentMid = $('#d_iframe').attr('mvid');
                    }
                }
            });

            // 配置 MutationObserver
            const config = { attributes: true, attributeFilter: ['src'] };

            // 观察目标节点
            observer.observe(document.getElementById('d_iframe'), config);

            // 清除 MutationObserver
            return () => {
                observer.disconnect();
            };
        }

        function startTimer() {
            endTimer();
            startTime = new Date().getTime();
        }

        function endTimer(is_last = false) {
            // 计算最后一次的观看时长
            if (typeof startTime !== 'undefined')
            {
                const endTime = new Date().getTime();
                const fwTime = endTime - startTime;
                send_log(fwTime)
                isLast = is_last
            }
        }

        // 监听页面卸载事件
        $(window).on('beforeunload', function() {
            if(!isLast){
                endTimer();
            }
        });

        // 初始化 MutationObserver
        initMutationObserver();

        function send_log(duration = 0){
            if(duration <= 0){
                return false;
            }
            duration = Math.floor(duration/1000)
            let data = {
                'cp_id': currentMid,
                'task_id': "{$task_id|default=0}",
                'duration': duration,
            }
            $.ajax({
                url: "{:sysuri('study_log')}",
                data: data,
                type: 'POST',
                dataType: 'JSON',
                success: function (res) {
                    console.log(res)
                },
                error: function (res) {
                    console.log(res)
                }
            })
        }
    })
</script>